<template>
  <div class="box">
    <h1>登录账号</h1>
    <span>虾米 - 严选商城欢迎您</span><br />
    <input
      type="text"
      class="i1"
      placeholder="手机号码"
      v-model="input1"
    /><br />
    <input
      type="password"
      class="i1"
      name=""
      placeholder="密码"
      v-model="input2"
    /><br />
    <button class="b1" @click="deng">登录</button>
    <p @click="goregister">还没有注册？ 立即注册</p>
    <button @click="alerts">弹框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      tokens: JSON.stringify(localStorage.getItem("token")),
    };
  },

  methods: {
    deng() {
      if (this.input1 != "" && this.input2 != "") {
        this.$API
          .login({ mobile: this.input1, pwd: this.input2 })
          .then((res) => {
            localStorage.setItem("token", res.data.data.token);
            //   console.log(res.data.data.token);
            this.$router.push({ path: "/home" });
          })
          .catch((res) => {
            alert("用户名或者密码不对");
            this.input1 = "";
            this.input2 = "";
          });
      } else {
        alert("请输入");
      }
    },
    goregister() {
      this.$router.push("/register");

      //   this.$router.push({ path: "/home" });
    },
    alerts() {
      this.$popup({
        title: "2020",
        content: "1203",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  input {
    // border-radius: 0.3rem;
  }
  p {
    color: rgb(98, 152, 197);
  }

  .i1 {
    margin: 0.3rem 0;
  }
}
.b1 {
  width: 30%;
  height: 1.5rem;
  background: orange;
  color: white;
  border: 1px solid orange;
  border-radius: 0.5rem;
}
</style>